<template>
  <div class="wrapper" :style="showBgCol">
    <!-- 定位 -->
    <div class="location-wrapper" ref="location">
       <svg-icon icon-class="location" className="icon-location" />
      <!-- 跳转到地图 -->
      <router-link
        class="address"
        tag="span"
        to="/dashboard/map"
      >{{location || '请选择地址'}}
      </router-link>
      <svg-icon iconClass="arrow_btom" className="icon-location"/>
    </div>
    <!-- 搜索框 -->
    <div class="search-wrapper" ref="search" @click="handleToSearch">
      <div class="search-content">
        <div class="icon-search-wrapper" >
          <svg-icon iconClass="search" className="icon-search" />
        </div>
        <span class="search-prompt">输入商品名称</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getLocalStore } from '../../../config/global'
import { LOCATION_ADDRESS } from '../../../config/pubsub-type'
import PubSub from 'pubsub-js'
export default {
  name: 'Header',
  data () {
    return {
      showBgColor: false,
      location: getLocalStore('userLocation')
    }
  },
  mounted () {
    const self = this
    self.$nextTick(() => {
      // 监听滚动事件
      window.addEventListener('scroll', self.handleScroll)
      this.$on('hook: beforeDestroy', () => {
        window.removeEventListener('scroll', self.handleScroll)
        PubSub.subscribe(LOCATION_ADDRESS)
      })
    })
    PubSub.subscribe(LOCATION_ADDRESS, (msg, data) => {
      if (msg === LOCATION_ADDRESS) {
        this.location = data
      }
    })
  },
  computed: {
    showBgCol () {
      return this.showBgColor ? { 'background-color': '#fff' } : ''
    }
  },

  components: {},

  methods: {
    handleScroll () {
      // const self = this
      const scrollTopE = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // const screenHeight = window.screen.availHeight
      scrollTopE > 168 ? this.showBgColor = true : this.showBgColor = false
    },
    handleToSearch () {
       this.$toast({
        message: '暂未开发',
        duration: 800
      })
    }
  }
  // beforeDestroy () {
  //   // 移除监听事件
  //   window.removeEventListener('scroll', this.handleScroll)
  //   // 移除通知时间
  //   PubSub.subscribe(LOCATION_ADDRESS)
  // }
}

</script>
<style lang='scss' scoped>
.wrapper {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  @include setWH(100%, px2rem(55));
  border-top: 1px solid #eee;
  // &::before {
  //   @include setBorderLine(#eee);
  // }
  .location-wrapper {
    max-width: 55%;
    min-width: 23%;
    margin-left: 1.3%;
    opacity: .6;
    white-space: nowrap;
    background-color: $text-color-black;
    border-radius: px2rem(55);
    @include flexType(space-around);
    color: $text-color-white;
    .icon-location {
      @include setWH(px2rem(33), px2rem(18));
      vertical-align: middle;
    }
    .address {
      max-width: 70%;
      min-width: 20%;
      height: px2rem(36);
      line-height: px2rem(36);
      padding: 0 px2rem(5);
      @include text-ellipsis;
      font-size: px2rem(13);

    }
  }
  .search-wrapper {
    flex: 1;
    height: px2rem(55);
    line-height: px2rem(55);
    @include setFontColor(px2rem(12), $text-color-weak);
    margin-left: 2%;
    margin-right: 2%;
    .search-content {
      width: 100%;
      margin-top: px2rem(9);
      border-radius: px2rem(55);
      display: flex;
      justify-content: center;
      height: px2rem(36);
      line-height: px2rem(36);
      background-color:$bg-color-search;
      .icon-search-wrapper {
        margin-right: px2rem(5);
        .icon-search {
          @include setWH(px2rem(18), px2rem(18));
          vertical-align: middle;
        }
      }
    }
  }
}
@media (min-width: 320px) {
  .search-wrapper {
    width: 55%;
  }
}
@media (min-width: 375px) {
  .search-wrapper {
    width: 57%;
  }
}
@media (min-width: 414px) {
  .search-wrapper {
    width: 62%;
  }
}

</style>
